import { StyleSheet } from 'react-native'
import React, { useState, useImperativeHandle, forwardRef } from 'react'
import { Button, AlertDialog } from 'native-base'

const Dialog = (props, ref) => {
  const { confirm = ()=>{} } = props
  const [isOpen, setIsOpen] = useState(false);
  const open = () => {
    setIsOpen(true)
  }
  const close = () => {
    setIsOpen(false)
  }
  // 向父组件暴露方法
  useImperativeHandle(ref, () => ({
    open,
    close
  }));
  return (
    <AlertDialog leastDestructiveRef={ref} isOpen={isOpen} onClose={close}>
      <AlertDialog.Content>
        <AlertDialog.CloseButton />
        <AlertDialog.Header>提示</AlertDialog.Header>
        <AlertDialog.Body>
          是否删除该条数据？
        </AlertDialog.Body>
        <AlertDialog.Footer>
          <Button.Group space={2}>
            <Button variant="unstyled" colorScheme="coolGray" onPress={close}>
              取消
            </Button>
            <Button colorScheme="danger" onPress={confirm}>
              删除
            </Button>
          </Button.Group>
        </AlertDialog.Footer>
      </AlertDialog.Content>
    </AlertDialog>
  )
}

export default forwardRef(Dialog)

const styles = StyleSheet.create({})